import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入仓库
import store from '@/store'
Vue.use(VueRouter)

// 重写push和replace解决搜索多次执行抛出的NavigationDuplicated的警告错误
// 原因： 新版的VueRouter引入promise对象，需要传入resolve和project回调函数
// 方法：先将VueRouter原型对象的push保存一份
// 参数一：跳转地址
// 参数二：成功回调
// 参数三：失败回调
const originPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    // originPush的调用对象是window 需要更改调用对象为VueRouter
    // call || apply区别
    // 相同点：都可以调用函数一次，都可以篡改函数的上下文一次
    // 不同点：call和apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组
    originPush.call(this, location, resolve, reject)
  } else {
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    )
  }
}

const originReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function (location, resolve, reject) {
  if (resolve && reject) {
    originReplace.call(this, location, resolve, reject)
  } else {
    originReplace.call(
      this,
      location,
      () => {},
      () => {}
    )
  }
}

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home'), // 路由懒加载 只有在用户访问时才会加载组件（高效）
    meta: { show: true }
  },
  {
    path: '/addCartSuccess',
    name: 'AddCartSuccess',
    component: () => import('@/views/AddCartSuccess'),
    meta: { show: true }
  },
  {
    path: '/shopcart',
    name: 'ShopCart',
    component: () => import('@/views/ShopCart'),
    meta: { show: true }
  },
  {
    path: '/trade',
    name: 'Trade',
    component: () => import('@/views/Trade'),
    meta: { show: true },
    beforeEnter: (to, from, next) => {
      // 参数位置不能错
      if (from.path === '/shopCart') {
        // 只有通过购物车才能进入交易页面
        next()
      } else {
        // 停留在当前组件
        next(false)
      }
    }
  },
  {
    path: '/pay',
    name: 'Pay',
    component: () => import('@/views/Pay'),
    meta: { show: true },
    beforeEnter: (to, from, next) => {
      if (from.path === '/trade') {
        next()
      } else {
        next(false)
      }
    }
  },
  {
    path: '/paySuccess',
    name: 'PaySuccess',
    component: () => import('@/views/PaySuccess'),
    meta: { show: true }
  },
  {
    path: '/center',
    name: 'Center',
    component: () => import('@/views/Center'),
    meta: { show: true },
    children: [
      {
        path: 'myOrder', // 二级路由要么写完整 要么不要写/
        name: 'MyOrder',
        component: () => import('@/views/Center/myOrder')
      },
      {
        path: 'groupOrder',
        name: 'GroupOrder',
        component: () => import('@/views/Center/groupOrder')
      },
      {
        path: '/center',
        redirect: 'myOrder'
      }
    ]
  },
  {
    path: '/detail/:skuid',
    name: 'Detail',
    component: () => import('@/views/Detail'),
    meta: { show: true }
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login'),
    meta: { show: false }
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('@/views/Register'),
    meta: { show: false }
  },
  {
    path: '/search/:keyword?', // 接收params参数需要占位？表示params参数可传可不传且url路径不会出现问题
    name: 'Search',
    component: () => import('@/views/Search'),
    meta: { show: true }
    // 路由组件也可以传递props参数   三种写法
    // 写法一： props为true
    // props: true
    // 写法二: 额外给组件传递参数
    // props: { a: 1, b: 2 }
    // 写法三：函数写法 可以通过props传递 params参数和query参数
    // props: ($route) => {
    //   return { keyword: $route.params.keyword, k: $route.query.k }
    // }
  }
]

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { y: 0 }
  }
})

// 全局前置守卫（在路由跳转之间判断）
router.beforeEach(async (to, from, next) => {
  // to 目标路由  from原路由  next放行函数
  // next()
  // console.log(store)
  const token = store.state.user.token
  const name = store.state.user.userInfo.name
  if (token) {
    if (to.path === '/login' || to.path === '/register') {
      next('/home')
    } else {
      // 不能用userInfo作为判断，未获取用户信息时是空对象，空对象判断永远是真，用userInfo里的字段做判断
      if (name) {
        next()
      } else {
        try {
          // 获取用户信息
          await store.dispatch('getUserInfo')
          next()
        } catch (error) {
          // 时间长了token会失效
          // 清除存储的token  仓库中的userInfo和token
          // 跳转至登录页面重新登录
          await store.dispatch('logout')
          next('/login')
        }
      }
    }
  } else {
    // 未登录
    // 没有登录不能去支付相关页面（pay paySuccess） 购物车 个人中心  跳转至登录页面
    if (to.path === '/center/myOrder' || to.path === '/pay' || to.path === '/shopCart') {
      // 把未登录时想去的页面地址保存在query参数中
      next('/login?redirect=' + to.path)
    } else {
      next()
    }
  }
})

export default router
